<template>
  <UserOption></UserOption>
  <TeacherTasksClassList @GetStudentallInformation="GetStudentallInformation" ref="RefChilde"
    v-if="State.ChangePanel === 0"></TeacherTasksClassList>
  <TeacherTasksTable :StudentallInformation="State.StudentallInformation"
    v-if="State.Role === '1' && State.ChangePanel === 0" @GetChangePanel="GetChangePanel"></TeacherTasksTable>
  <StudentTasksTable v-if="State.Role === '2' && State.ChangePanel === 0"
    :StudentallInformation="State.StudentallInformation" @GetChangePanel="GetChangePanel"></StudentTasksTable>
  <ProductActivationList v-if="State.ChangePanel === 0"></ProductActivationList>
  <ResuAll v-if="State.ChangePanel === 1" :SetResuAllData="State.SetResuAllData" @SetChangePanel="SetChangePanel">
  </ResuAll>
  <div :class="isSearch ? 'SearchClick' : 'Search'">
    <img class="searchBtn" src="../../public/img/搜索.png" alt="">
    <form action="">
      <input class="searchIpt" placeholder="搜索" type="text" @focus="IptFocus" @blur="IptBlur" v-model="searchVal"
        @input="IptChange" @keydown.enter="handleEnter">
    </form>
    <img class="searchClose" v-show="searchVal != ''" src="../../public/img/关闭.png" @click="cancelSearch" alt="">
  </div>
</template>

<script>
import TeacherTasksClassList from "@/components/teacher/TeacherTasksClassList.vue";
import TeacherTasksTable from "@/components/teacher/TeacherTasksTable.vue";
import StudentTasksTable from "@/components/student/StudentTasksTable.vue";
import ResuAll from "@/views/ResuAll.vue";
import { defineComponent, onMounted, provide, ref, reactive, watch } from "vue";
import bus from "@/bus.js";
import router from '@/router'
import HomeContent from "@/components/HomeContent";
export default defineComponent({
  name: "SimulationTasks",
  components: {
    TeacherTasksClassList,
    TeacherTasksTable,
    StudentTasksTable,
    ResuAll,
  },
  setup() {
    let isSearch = ref(false)
    let pratuctArr = []
    let searchVal = ref('')
    //获取老师的班级
    let State = reactive({
      StudentallInformation: [],
      Role: sessionStorage.getItem('role'),
      ChangePanel: 0,
      SetResuAllData: [],
    })
    let RefChilde = ref(null)
    //获取班级得实训任务信息
    function GetStudentallInformation(data) {
      State.StudentallInformation = data
    }
    //获取从成绩传过来的面板值
    function GetChangePanel(data) {
      console.log('zhelii?????????m,e ', data);

      State.ChangePanel = data[0].ChangePanel
      State.SetResuAllData = data

    }
    //
    function SetChangePanel(ChangePanel) {
      if (ChangePanel === 1) {
        State.ChangePanel = 0
      }
    }
    bus.$off('UpdateHomeTaskPanel')
    //不同组件传值
    bus.$on('UpdateHomeTaskPanel', (data) => {
      if (data === 'Updates') {
        if (router.currentRoute.value.name === 'SimulationTasks') {
          RefChilde.value.GetTeacherAllClass()
        }
      }
    })

    // ==================
    // 搜索聚焦
    function IptFocus() {
      HomeContent.Default.searchVal.value = searchVal.value
      isSearch.value = true
      pratuctArr.value = JSON.parse(sessionStorage.getItem("shouyeDate"))
    }
    // 搜索失焦
    function IptBlur() {
      HomeContent.Default.searchVal.value = searchVal.value
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
    }
    // 搜索改变
    async function IptChange() {
      HomeContent.Default.searchVal.value = searchVal.value
      HomeContent.Default.searchList.value = []
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
      pratuctArr.value.forEach(element => {
        if (element.shortName.includes(HomeContent.Default.searchVal.value) || element.number.slice(-3).includes(HomeContent.Default.searchVal.value)) {
          HomeContent.Default.searchList.value.push(element)
        }
      });
      console.log('实训任务搜索筛选结果', HomeContent.Default.searchList.value);

    }
    // 取消搜索
    function cancelSearch() {
      searchVal.value = ''
      HomeContent.Default.searchVal.value = ''
    }
    // enter事件
    function handleEnter(event) {
      event.preventDefault(); // 阻止默认行为
      console.log('搜索的enter键盘', event);
    }
    onMounted(() => {
      if (HomeContent.Default.searchVal.value != '') {
        searchVal.value = HomeContent.Default.searchVal.value
        IptFocus()
        IptChange()
      } else {
        HomeContent.Default.searchVal.value = searchVal.value
      }
    });
    return {
      State,
      GetStudentallInformation,
      RefChilde,
      GetChangePanel,
      SetChangePanel,
      // =====
      IptFocus,
      IptBlur,
      IptChange,
      isSearch,
      pratuctArr,
      searchVal,
      cancelSearch,
      handleEnter,
    };
  },
});
</script>
<style lang="less">
.Search {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ABABAB;
  display: -webkit-inline-box;
  z-index: 1000;
}

.SearchClick {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #3389EC;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #080808;
  display: -webkit-inline-box;
  z-index: 1000;
}

.searchIpt {
  width: 640px;
  height: 40px;
  border: none;
}

.searchIpt::placeholder {
  color: #DCDFE6;
}

.searchIpt:focus-visible {
  outline: none;
  color: #080808;
}

.searchBtn {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.searchClose {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}
</style>
